<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Button from "./Button.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import type { ButtonProps } from "./Button";
    import Icon from "@iconify/svelte";
    import RadioGroup from "../RadioGroup/RadioGroup.svelte";

    /**
     * Button 按钮
     */
    const { Story } = defineMeta({
        title: "Components/Base/Button",
        component: Button,
        tags: ["autodocs"],
        argTypes: {
            size: {
                control: "select",
                options: ["default", "small", "large"],
                table: {
                    defaultValue: { summary: "default" },
                },
            },
            type: {
                control: "select",
                options: ["primary", "secondary", "tertiary", "success", "error", "danger", "warning", "default"],
                table: {
                    defaultValue: { summary: "primary" },
                },
            },
            theme: {
                control: "select",
                options: ["light", "solid", "borderless", "outline", "dashed"],
                table: {
                    defaultValue: { summary: "solid" },
                },
            },
            shape: {
                control: "select",
                options: ["square", "round", "circle"],
                table: {
                    defaultValue: { summary: "square" },
                },
            },
            disabled: {
                control: "boolean",
                table: {
                    defaultValue: { summary: "false" },
                },
            },
            loading: {
                control: "boolean",
            },
            iconAlign: {
                table: {
                    defaultValue: { summary: "left" },
                },
            },
        },
        args: {
            onclick: fn(),
        },
    });

    let loading = $state(false);
    let theme = $state<ButtonProps["theme"]>("light");
</script>

<Story name="Default">
    {#snippet template(args)}
        <Button {...args}>Button</Button>
    {/snippet}
</Story>

<!-- 按钮类型 -->
<Story name="Type" args={{ type: "primary" }}>
    {#snippet template(args)}
        <Space>
            {#each ["primary", "secondary", "tertiary", "success", "error", "danger", "warning", "default"] as ButtonProps["type"][] as type}
                <Button {type}>{type}</Button>
            {/each}
        </Space>
    {/snippet}
</Story>

<!-- 不同样式的按钮 -->
<Story name="Theme">
    {#snippet template(args)}
        <Space dir="v" inline>
            <RadioGroup
                stick
                data={[
                    { label: "light", value: "light" },
                    { label: "solid", value: "solid" },
                    { label: "borderless", value: "borderless" },
                    { label: "outline", value: "outline" },
                    { label: "dashed", value: "dashed" },
                ]}
                bind:value={theme}
            ></RadioGroup>
            <Space>
                {#each ["primary", "secondary", "tertiary", "success", "error", "danger", "warning", "default"] as ButtonProps["type"][] as type}
                    <Button {type} {theme}>{type}</Button>
                {/each}
            </Space>
        </Space>
    {/snippet}
</Story>

<!-- 禁用按钮 -->
<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Space dir="v">
            <Space>
                {#each ["primary", "secondary", "tertiary", "success", "error", "danger", "warning", "default"] as ButtonProps["type"][] as type}
                    <Button {type} {...args}>{type}</Button>
                {/each}
            </Space>

            <Space>
                {#each ["light", "solid", "borderless", "outline", "dashed"] as ButtonProps["theme"][] as theme}
                    <Button type="secondary" {theme} {...args}>{theme}</Button>
                {/each}
            </Space>
        </Space>
    {/snippet}
</Story>

<!-- 按钮尺寸，默认 default 支持 `small` `default` `large` -->
<Story name="Size" args={{ size: "default" }}>
    {#snippet template(args)}
        <Space dir="v" inline>
            <Button type="primary" {...args}>Primary</Button>
            <Space>
                {#each ["small", "default", "large"] as ButtonProps["size"][] as size}
                    <Button {size}>{size}</Button>
                {/each}
            </Space>
        </Space>
    {/snippet}
</Story>

<!-- 按钮形状，默认 square 支持 `square` `round` `circle` -->
<Story name="Shape" args={{ shape: "square" }}>
    {#snippet template(args)}
        <Space dir="v" inline>
            <Button type="primary" {...args}>Primary</Button>
            <Space>
                {#each ["round", "circle", "square"] as ButtonProps["shape"][] as shape}
                    <Button {shape}>{shape === "circle" ? "C" : shape}</Button>
                {/each}
            </Space>
        </Space>
    {/snippet}
</Story>

{#snippet tempIcon(name: string)}
    <Icon icon={name} />
{/snippet}

<!-- 通过设置icon属性在Button内嵌入一个Icon -->
<!-- 使用Button的icon属性，图标位置将在最左边，通过设置 iconAlign 将按钮放置在后面。 -->
<Story name="IconButton">
    {#snippet template(args)}
        {#snippet IconHome()}
            {@render tempIcon("ion:home")}
        {/snippet}
        <Space>
            <Button icon={IconHome}></Button>
            <Button icon={IconHome}>Home</Button>
            <Button icon={IconHome} iconAlign="right">Home</Button>
        </Space>
    {/snippet}
</Story>

<!-- 通过添加loading属性可以让按钮处于加载中状态,可动态设置 -->
<Story name="Loading">
    {#snippet template(args)}
        <Space>
            <Button type="success" loading size="small" />
            <Button type="success" loading size="small" shape="circle" />
            <Button
                type="primary"
                {loading}
                onclick={() => {
                    loading = true;
                    setTimeout(() => {
                        loading = false;
                    }, 2000);
                }}>Click Loading</Button
            >
        </Space>
    {/snippet}
</Story>
